Redux Devtool を使う

Redux を使って状態を管理している Web サービスなどで「状態の流れ」を調査しやすくしてくれるツールです。僕的には開発時には必須な感じで使っています。

Chrome 依存になってしまいますが、　Chrome 拡張で入れてしまうのが1番てっとり早いかなと思います。この辺は開発時に1番使うので問題ないかなと考えてます。

入れたあとはwindowに__REDUX_DEVTOOLS_EXTENSION__というフック関数が増えているはずです。適当なページを開いて Devtool のコンソールを開いて確認できます。

Redux のcreateStoreの最後の引数にはenchancerという関数が渡せることになっています。これはzzz(yyy(xxx(...)))というような順番に適応する関数の集まりみたいなやつです。（compose(zzz, yyy, zzz)()と書かれていたりもする）

ここに__REDUX_DEVTOOLS_EXTENSION__を渡します。今回はこれだけで１つなのでそのまま実行すればいいです。

createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);

そのままだと型警告が来ると思うのでこんな感じでwindowを拡張するといいです。

declare namespace window {
  export const __REDUX_DEVTOOLS_EXTENSION__: Function | undefined;
}

純